<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.7.6/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">
    <div class="layui-row layui-col-space15" ><div id="statistics_panel"></div></div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>

</div>
<script id="statistics" type="text/html">
    <div class="layui-col-xs12 layui-col-md3">
        <div class="layui-card top-panel">
            <div class="layui-card-header">节日订单总额</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space5">
                    <div class="layui-col-xs9 layui-col-md8 top-panel-number" style="color: #FFB800">
                        {{ d.total_amount}}
                    </div>
                    <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                        支出 <a style="color: #1aa094"> {{ d.pay_amount}}</a><br>
                        退款 <a style="color: #bd3004"> {{ d.refund_amount}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-xs12 layui-col-md3">
        <div class="layui-card top-panel">
            <div class="layui-card-header">节日未处理订单</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space5">
                    <div class="layui-col-xs9 layui-col-md7 top-panel-number" style="color: #fc0808">
                        {{ d.undeal_order}}
                    </div>
                    <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                        未超时 <a style="color: #1aa094"> {{ d.undeal_order - d.undeal_order_timeout}}</a><br>
                        已超时 <a style="color: #bd3004"> {{ d.undeal_order_timeout}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-xs12 layui-col-md3">
        <div class="layui-card top-panel">
            <div class="layui-card-header">节日待配送订单</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space5">
                    <div class="layui-col-xs9 layui-col-md7 top-panel-number" style="color: #d90ac4">
                        {{ d.wait_send_order}}
                    </div>
                    <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                        未超时 <a style="color: #1aa094"> {{ d.wait_send_order - d.wait_send_order_timeout}}</a><br>
                        已超时 <a style="color: #bd3004"> {{ d.wait_send_order_timeout}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-xs12 layui-col-md3">
        <div class="layui-card top-panel">
            <div class="layui-card-header">节日全部订单</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space5">
                    <div class="layui-col-xs9 layui-col-md7 top-panel-number" style="color: #7dbe2d">
                        {{ d.total_order}}
                    </div>
                    <div class="layui-col-xs3 layui-col-md4 top-panel-tips">
                        完成 <a style="color: #1aa094"> {{ d.complete_order}}</a><br>
                        退款 <a style="color: #bd3004"> {{ d.refund_order}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</script>
<!--</div>-->
<script src="/static/lib/layui-v2.7.6/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts','laytpl'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laytpl = layui.laytpl,
            echarts = layui.echarts;


        $.ajax({
            url: "/panel",
            type: 'get',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data:{},
            success: function (obj) {
                /**
                 * 统计面板
                 */
                //模板赋值
                var getTpl = statistics.innerHTML
                    ,view = document.getElementById('statistics_panel');
                laytpl(getTpl).render(obj.data.statistics, function(html){
                    view.innerHTML = html;
                });

                /**
                 * 报表功能
                 */
                var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                var optionRecords = {
                    title: {
                        text: '订单报表'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['自取', '自配', '达达']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['08:00','08:30', '09:00', '09:30','10:00', '10:30','11:00','11:30', '12:00','12:30', '13:00','13:30', '14:00','14:30', '15:00','15:30', '16:00','16:30', '17:00','17:30', '18:00','18:30', '19:00','19:30', '20:00','20:30', '21:00','21:30', '22:00','22:30', '23:00','23:30', '24:00']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '自取',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: obj.data.echartsRecords[0]
                        },
                        {
                            name: '自配',
                            type: 'line',
                            areaStyle: {},
                            data: obj.data.echartsRecords[1]
                        },
                        {
                            name: '达达',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: obj.data.echartsRecords[2]
                        },
                    ]
                };
                echartsRecords.setOption(optionRecords);

                /**
                 * 玫瑰图表
                 */
                var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
                var optionPies = {
                    title: {
                        text: '订单来源',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['微信','门店', '美团', '饿了么', '抖音', '高德']
                    },
                    series: [
                        {
                            name: '订单来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            roseType: 'radius',
                            data: [
                                {value: obj.data.echartsPies[0], name: '微信'},
                                {value: obj.data.echartsPies[1], name: '门店'},
                                {value: obj.data.echartsPies[2], name: '美团'},
                                {value: obj.data.echartsPies[3], name: '饿了么'},
                                {value: obj.data.echartsPies[4], name: '抖音'},
                                {value: obj.data.echartsPies[5], name: '高德'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                echartsPies.setOption(optionPies);

                /**
                 * 柱状图
                 */
                var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

                var optionDataset = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        dimensions: ['product', '未处理', '待配送', '已完成','退款'], //0.未处理 1.待配送 2.已完成 3.退款
                        source: [ //0.线下 1.美团 2.饿了么 3.抖音 4.高德
                            {product: '线下', '未处理': obj.data.echartsDataset[0][0], '待配送':  obj.data.echartsDataset[0][1], '已完成': obj.data.echartsDataset[0][2], '退款': obj.data.echartsDataset[0][3]},
                            {product: '美团', '未处理':  obj.data.echartsDataset[1][0], '待配送': obj.data.echartsDataset[1][1], '已完成': obj.data.echartsDataset[1][2], '退款': obj.data.echartsDataset[1][3]},
                            {product: '饿了么', '未处理':  obj.data.echartsDataset[2][0], '待配送': obj.data.echartsDataset[2][1], '已完成': obj.data.echartsDataset[2][2], '退款': obj.data.echartsDataset[2][3]},
                            {product: '抖音', '未处理': obj.data.echartsDataset[3][0], '待配送':obj.data.echartsDataset[3][1], '已完成': obj.data.echartsDataset[3][2], '退款': obj.data.echartsDataset[3][3]},
                            {product: '高德', '未处理':  obj.data.echartsDataset[4][0], '待配送': obj.data.echartsDataset[4][1], '已完成': obj.data.echartsDataset[4][2], '退款': obj.data.echartsDataset[4][3]},
                        ]
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                };

                echartsDataset.setOption(optionDataset);

            },
            error: function (xhr, textstatus, thrown) {
                layer.msg('网络错误');
            }
        });

        function doPoll(){
            $.ajax({
                url: "/panel",
                type: 'get',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                data:{},
                success: function (obj) {
                    /**
                     * 统计面板
                     */
                        //模板赋值
                    var getTpl = statistics.innerHTML
                        ,view = document.getElementById('statistics_panel');
                    laytpl(getTpl).render(obj.data.statistics, function(html){
                        view.innerHTML = html;
                    });

                    /**
                     * 报表功能
                     */
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                    var optionRecords = {
                        title: {
                            text: '订单报表'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['自取', '自配', '达达', '专车']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: ['08:00','08:30', '09:00', '09:30','10:00', '10:30','11:00','11:30', '12:00','12:30', '13:00','13:30', '14:00','14:30', '15:00','15:30', '16:00','16:30', '17:00','17:30', '18:00','18:30', '19:00','19:30', '20:00','20:30', '21:00','21:30', '22:00','22:30', '23:00','23:30', '24:00']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '自取',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                data: obj.data.echartsRecords[0]
                            },
                            {
                                name: '自配',
                                type: 'line',
                                areaStyle: {},
                                data: obj.data.echartsRecords[1]
                            },
                            {
                                name: '达达',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                data: obj.data.echartsRecords[2]
                            },
                            {
                                name: '专车',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                data: obj.data.echartsRecords[3]
                            },
                        ]
                    };
                    echartsRecords.setOption(optionRecords);

                    /**
                     * 玫瑰图表
                     */
                    var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
                    var optionPies = {
                        title: {
                            text: '订单来源',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['微信','门店', '美团', '饿了么', '抖音', '高德']
                        },
                        series: [
                            {
                                name: '订单来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                roseType: 'radius',
                                data: [
                                    {value: obj.data.echartsPies[0], name: '微信'},
                                    {value: obj.data.echartsPies[1], name: '门店'},
                                    {value: obj.data.echartsPies[2], name: '美团'},
                                    {value: obj.data.echartsPies[3], name: '饿了么'},
                                    {value: obj.data.echartsPies[4], name: '抖音'},
                                    {value: obj.data.echartsPies[5], name: '高德'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    echartsPies.setOption(optionPies);

                    /**
                     * 柱状图
                     */
                    var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

                    var optionDataset = {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            dimensions: ['product', '未处理', '待配送', '已完成','退款'], //0.未处理 1.待配送 2.已完成 3.退款
                            source: [ //0.微信 1.门店 2.美团 3.饿了么 4.抖音 5.高德
                                {product: '微信', '未处理': obj.data.echartsDataset[0][0], '待配送':  obj.data.echartsDataset[0][1], '已完成': obj.data.echartsDataset[0][2], '退款': obj.data.echartsDataset[0][3]},
                                {product: '门店', '未处理': obj.data.echartsDataset[1][0], '待配送':  obj.data.echartsDataset[1][1], '已完成': obj.data.echartsDataset[1][2], '退款': obj.data.echartsDataset[1][3]},
                                {product: '美团', '未处理':  obj.data.echartsDataset[2][0], '待配送': obj.data.echartsDataset[2][1], '已完成': obj.data.echartsDataset[2][2], '退款': obj.data.echartsDataset[2][3]},
                                {product: '饿了么', '未处理':  obj.data.echartsDataset[3][0], '待配送': obj.data.echartsDataset[3][1], '已完成': obj.data.echartsDataset[3][2], '退款': obj.data.echartsDataset[3][3]},
                                {product: '抖音', '未处理': obj.data.echartsDataset[4][0], '待配送':obj.data.echartsDataset[4][1], '已完成': obj.data.echartsDataset[4][2], '退款': obj.data.echartsDataset[4][3]},
                                {product: '高德', '未处理':  obj.data.echartsDataset[5][0], '待配送': obj.data.echartsDataset[5][1], '已完成': obj.data.echartsDataset[5][2], '退款': obj.data.echartsDataset[5][3]},
                            ]
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {type: 'bar'},
                            {type: 'bar'},
                            {type: 'bar'},
                            {type: 'bar'}
                        ]
                    };

                    echartsDataset.setOption(optionDataset);

                    setTimeout(doPoll,5000);
                },
                error: function (xhr, textstatus, thrown) {
                    layer.msg('网络错误');
                }
            });
        }

        doPoll()

        /**
         * 中国地图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2021', '2022'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2021} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2021',
                        tooltip: '2021'
                    }
                }
            ]
        };

        echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
